<template>
  <div>
    <div class="content">
      <div class="words">
        <div class="title">
          <span>This is my favourite </span><br />
          <span>Pet care agency.</span>
        </div>

        <div class="word">
          <swiper :options="swiperOptions">
            <swiper-slide v-for="(item, index) in article" :key="index">{{
              item[index]
            }}</swiper-slide>
          </swiper>
          <!-- <swiper :options="swiperOptions"> -->
          <!-- <span v-for="(item, index) in article" :key="index">
            {{ item[index] }}
          </span> -->
          <!-- </swiper> -->
        </div>

        <div class="bottom">
          <div class="swiper-pagination left" slot="pagination"></div>
          <!-- <div class="left">
            <img src="../../static/lunbo-removebg-preview.png" alt="" />
          </div> -->
          <div class="right">
            <button class="l_btn">
              <img src="../../static/l_箭头-removebg-preview.png" alt="" />
            </button>
            <button class="r_btn">
              <img src="../../static/箭头-removebg-preview.png" alt="" />
            </button>
          </div>
        </div>
      </div>
      <div class="pic">
        <div class="l_cat">
          <img src="../../static/people-removebg-preview.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOptions: {
        pagination: ".swiper-pagination",
        // loop: true,
        // autoplay: 1000,
        nextButton: ".r_btn",
        prevButton: ".l_btn",
      },
      article: [
        {
          0: `The only place l will leave my little girlwhen l go away.The only
            issue is she doesn't want to come home because she is having so much
            fun.The best part is theaccessibility to the staff and pictures on
            Facebook ofplaytime.l could not feel more confident in who istaking
            care of my pup while being out of town.`,
        },
        {
          1: `The only place l will leave my little girlwhen l go away.The only
            issue is she doesn't want to come home because she is having so much
            fun.The best part is theaccessibility to the staff and pictures on
            Facebook ofplaytime.l could not feel more confident in who istaking
            care of my pup while being out of town.`,
        },
        {
          2: `The only place l will leave my little girlwhen l go away.The only
            issue is she doesn't want to come home because she is having so much
            fun.The best part is theaccessibility to the staff and pictures on
            Facebook ofplaytime.l could not feel more confident in who istaking
            care of my pup while being out of town.`,
        },
        {
          3: `The only place l will leave my little girlwhen l go away.The only
            issue is she doesn't want to come home because she is having so much
            fun.The best part is theaccessibility to the staff and pictures on
            Facebook ofplaytime.l could not feel more confident in who istaking
            care of my pup while being out of town.`,
        },
        {
          4: `The only place l will leave my little girlwhen l go away.The only
            issue is she doesn't want to come home because she is having so much
            fun.The best part is theaccessibility to the staff and pictures on
            Facebook ofplaytime.l could not feel more confident in who istaking
            care of my pup while being out of town.`,
        },
      ],
    };
  },
};
</script>

<style scoped>
.bottom >>> .swiper-pagination-bullet {
  width: 10px;
  height: 15px;
  font-weight: bolder;
  border-radius: 22px;
  margin: 8px;
  vertical-align: middle;
}
.bottom >>> .swiper-pagination-bullet-active {
  width: 9px;
  height: 20px;
  font-weight: bolder;
  border-radius: 22px;
  margin: 8px;
  background-color: #ff5a2f;
}

.content {
  height: 100%;
  padding: 100px;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 100px auto;
  border-radius: 100px;
  overflow: hidden;
  flex-wrap: wrap;
  background-color: #fff6ee;
}
.pic {
  margin: auto;
  display: flex;
  justify-content: center;
}
.l_cat {
  margin: auto;
  text-align: center;
  background-color: #ffda55;
  border-radius: 180px;
}
.l_cat img {
  position: relative;
  bottom: -16px;
}
.words {
  box-sizing: border-box;
  margin: auto;
  width: 50%;
  /* background: red; */
}
.title {
  color: #000a58;
  font-weight: bolder;
  font-size: 65px;
  word-spacing: -2px;
  text-overflow: ellipsis;
}
.word {
  margin-top: 37px;
  font-size: 20px;
  line-height: 32px;
}
.bottom {
  justify-content: space-between;
  margin-top: 37px;
}
.left {
}
.left img {
  width: 50%;
}
.l_btn {
  background-color: transparent;
  border: none;
  width: 60px;
  height: 41px;
  border-radius: 40px;
  position: relative;
}
.right {
  text-align: end;
}
.r_btn {
  width: 60px;
  height: 40px;
  border: none;
  background: #ffffff;
  border-radius: 40px;
}
.r_btn img {
  width: 60%;
  border-radius: 100px;
}
.l_btn img {
  position: relative;
  width: 75%;
  border-radius: 100%;
  top: 5%;
}
@media screen and (min-width: 320px) and (max-width: 768px) {
  .words {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1440px) {
  .title {
    font-size: 49px;
    word-spacing: -2px;
  }
  .word {
    font-size: 16px;
  }
}
/* 台式电脑显示器屏幕字体大小 */
@media screen and (min-width: 1440px) {
}
</style>